<template>
    <div id="scroll" :v-model="dataPopRadio" class="solidUl" @scroll="scrollChange">
         <ul>
             <li
                 v-for="(item, index) in dataPopOption"
                 :key="index"
                 class="item2"
             >{{item.label}}</li>
         </ul>
         <!-- 滚动过程中滚动到的所需位置 -->
         <div class="backgroundFloat"></div>
     </div>
</template>
 
<script setup>

const dataPopOption = [{
    name: '婚礼',
    label: '婚礼'
}, {
    name: '商演',
    label: '商演'
}, {
    name: '教育',
    label: '教育'
}, {
    name: '野餐',
    label: '野餐'
}, {
    name: '婚假',
    label: '婚假'
}, {
    name: '考研',
    label: '考研'
}, {
    name: '晚会',
    label: '晚会'
},{
    name: '母婴',
    label: '母婴'
},{
    name: '日常',
    label: '日常'
},{
    name: '休闲',
    label: '休闲'
}

]
const scrollChange =(e)=>{
    //首先获取到li元素
    var lis=document.getElementsByClassName('item2')
    //对li元素进行遍历
    for(var i=0;i<lis.length;i++){
        let rem=Number(window.getComputedStyle(document.documentElement)["fontSize"].split('px')[0])
        //offsetTop返回当前元素相对于节点顶部偏移量，scrollTop返回一个元素垂直滚动的距离
        //在滚动过程中，lis[i].offsetTop-e.target.scrollTop可获取到当前元素距离顶部的位置
        //打印出结果对比，选择需要范围的值，li设置的高度为40px，因此185与225之间相差40，
        //而185与225是实际输出对比测量后元素滚动到该位置时设置选中的样式范围。
        //再将185和225改为rem变量适应别的屏幕大小
        if((lis[i].offsetTop-e.target.scrollTop) > 1.85*rem && (lis[i].offsetTop-e.target.scrollTop) < 2.25*rem){
        //当元素滚动到当前位置时，先将元素原来为"active2"的class属性去掉
        //再给元素增加"active"的属性
            lis[i].classList.remove("active2")
            lis[i].classList.add("active")
        //给当前元素以上的元素动态设置文字大小，离当前文字越远，文字大小越小
            for(var j=1;j<=i;j++){
                lis[i-j].style.fontSize = (20-0.5*j)+'px'
            }
        //给当前元素以下的元素动态设置文字大小，离当前文字越远，文字大小越小
            for(var k=1;k<lis.length-i;k++){
                lis[i+k].style.fontSize = (20-0.5*k)+'px'
            }
        //当没滚动到期待位置时，也就是其他所有元素，移除"active"的样式，增加"active2"的样式
        }else{
            lis[i].classList.remove("active")
            lis[i].classList.add("active2")
        }
    }
}
 
 </script>
 
 <style lang="scss" scoped>
 .solidUl{
    width: 50%;
     padding-top: 0.3rem;
     margin-top: 0.15rem;
     height: 3.5rem;
     //滚动设置在div内
     overflow-y: scroll;
     //增加滚动的流畅性
     touch-action: pan-y;
     -webkit-overflow-scrolling: touch;
 }
 ul {
     
     padding: 0.8rem 0 2.3rem 0;
     margin: 0;
     background-color: #fff;
     li {
         display: flex;
         justify-content: center;
         align-items: center;
         list-style: none;
         font-size: 0.2rem;
         font-weight: bold;
         line-height: 0.2rem;
         text-align: center;
         opacity: 0.3;
         height: 0.4rem;
         background-color: #fff;
     }
 }
 .active {
    font-size: 30px;
     font-weight: bold;
     font-size: 0.25rem !important;
     color: rgb(240,191,45);
     //不透明度需要高点，因为有backgroundFloat颜色的影响
     opacity: 1.2 !important;
     top: 1.5rem;
 }
 .active2 {
     color: #333;
     //设置不透明度
     opacity: 0.6 !important;
 }
 //给滚动到的所需位置增加背景色等样式
 .backgroundFloat{
     width: 38.7%;
     height: 0.4rem;
     background-color: rgb(255, 255, 131);
     border-top-right-radius: 0.2rem;
     border-bottom-right-radius: 0.2rem;
     //降低不透明度，以防遮挡文字
     opacity: 0.2;
     position: absolute;
     top: 1.9rem;
    //  right: 50px;
 }
 </style>